<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>移除和克隆元素(Remove and clone elements)</title>
  <!-- 
  在JavaScript中，移除和克隆元素是操作DOM的重要功能。通过这些操作，开发者可以动态地更新网页内容。
  一、移除元素
  1. 使用 remove() 方法：
    - remove() 方法可以直接从DOM中移除指定的元素。该方法是较新的标准，支持大多数现代浏览器。
    const element = document.getElementById('myElement');
    element.remove(); // 移除指定的元素
  2. 使用 parentNode.removeChild() 方法：
    - 这是一个较旧的方法，通过访问元素的父节点并调用 removeChild() 方法来移除元素。
    const element = document.getElementById('myElement');
    const parent = element.parentNode; // 获取父节点
    parent.removeChild(element); // 从父节点中移除指定的元素

  二、克隆元素
  1. 使用 cloneNode() 方法：
    - cloneNode() 方法可以克隆一个节点。该方法接受一个布尔参数 deep，如果为 true，则克隆该节点及其所有子节点；如果为 false，则只克隆该节点本身。
    const originalElement = document.getElementById('myElement');
    const clonedElement = originalElement.cloneNode(true); // 深度克隆，包括所有子节点
  2. 将克隆的元素插入到DOM中：
    - 克隆的元素可以使用 appendChild() 或其他插入方法添加到DOM中。
    const parentElement = document.getElementById('parent');
    parentElement.appendChild(clonedElement); // 将克隆的元素插入到父元素中

  总结
  - 使用 remove() 方法可以直接从DOM中移除元素，或者使用 parentNode.removeChild() 方法。
  - 使用 cloneNode() 方法可以克隆元素，支持深度克隆或浅克隆。
  - 克隆的元素可以通过 appendChild() 等方法插入到DOM中。

   -->
</head>
<body>

  <div class="remove-clone">
    <button onclick="removeElement()">移除元素</button>
    <button onclick="cloneElement()">克隆元素</button>
  </div>

  <div class="parent">
    <div id="myElement">这是一个要移除或克隆的元素</div>
  </div>

  <script>
    function removeElement() {
      const element = document.getElementById('myElement');
      element.remove();
    }

    let counter = 0
    function cloneElement() {
      const originalElement = document.getElementById('myElement');
      const clonedElement = originalElement.cloneNode(true);
      clonedElement.textContent = '这是一个克隆的元素' + counter;
      const parentElement = document.querySelector('.parent');
      parentElement.append(clonedElement);

      counter ++
    }
  </script>
  </div>
  
</body>
</html>